<template>
  <div class="container">
    <img src="../assets/banner.jpg" alt="" class="banner" />
    <img
      :src="
        require('../assets/games' +
          randomFile +
          '/game' +
          $route.query.index +
          '.jpg')
      "
      alt=""
      class="detalis-img"
    />
    <div class="btn" @click="palyClick">Play Now</div>
    <p class="game-name">{{ detailData.detals.title }}</p>
    <p class="game-describe">{{ detailData.detals.describe }}</p>
    <div class="list">
      <img
        v-for="(item, index) in gameList"
        :key="item.id"
        @click="toDetails(item.id, index, randomNum)"
        :src="
          require('../assets/games' +
            randomNum +
            '/game' +
            (index + 1) +
            '.jpg')
        "
        alt=""
        class="list-img"
      />
    </div>
    <img src="../assets/banner.jpg" alt="" class="banner" />
  </div>
</template>
<script>
import gameData from "@/assets/data.json";

export default {
  name: "Details",
  data() {
    return {
      gameList: gameData.slice(0, 9),
      detailData: {},
      randomFile: this.$route.query.fileIndex,
      randomNum: this.getRandomInt(1, 8),
    };
  },
  created() {
    this.detailData = gameData.find((item) => item.id == this.$route.query.id);
    // console.log(this.detailData);
  },
  methods: {
    toDetails(id, index, fileIndex) {
      this.$router.push({
        path: "/details",
        query: { id: id, index: index + 1, fileIndex: fileIndex },
      });
      this.$router.go(0);
    },
    palyClick() {
      this.$router.push({
        path: "/games",
        query: { url: this.detailData.url },
      });
    },
    getRandomInt(min, max) {
      min = Math.ceil(min); // 将min向上取整
      max = Math.floor(max); // 将max向下取整
      return Math.floor(Math.random() * (max - min + 1)) + min; // 返回min到max之间的随机整数
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  background: #fff;
  .banner {
    width: 100%;
  }
  .detalis-img {
    height: 300px;
    margin: 10px;
    border-radius: 10px;
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    background: #388ef5;
    border-radius: 10px;
    color: #fff;
    font-size: 28px;
    margin: 10px;
  }
  .game-name {
    margin-top: 20px;
    font-weight: bold;
    margin: 0 20px;
    font-size: 22px;
  }
  .game-describe {
    margin-top: 10px;
    margin: 0 20px;
    font-size: 18px;
  }
  .list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
    padding: 10px;
    margin-top: 20px;

    .list-img {
      width: 110px;
      height: 110px;
      border-radius: 10px;
    }
  }
}
</style>